혼자 공부하는 바이브 코딩 — 6장 클로드 코드에 API 날개 달기 딥다이브 학습 노트

출처: 혼자 공부하는 바이브 코딩 with 클로드 코드 (조태호) | 참고: https://github.com/taehojo/vibecoding

6장에서 다루는 내용

• API의 개념과 활용 방법 — 외부 서비스와 연동하는 창구
• AI 모델 선택하기 — OpenAI, Google Gemini 등 다양한 모델 비교
• '냉장고를 부탁해' 앱 만들기 — 냉장고 사진 → 재료 인식 → 레시피 추천 앱

전체 흐름도

[06-1 API 설정]                  [06-2 '냉장고를 부탁해' 앱]
    |                               |
    v                               v
+---------------------+   +---------------------------+
| API란?              |   | PRD 작성                   |
| = 프로그램 간 소통 창구|   | 1단계: 냉장고 이미지 인식    |
|                     |   | 2단계: 레시피 생성          |
| AI 모델 비교         |   | 3단계: 사용자 프로필 저장    |
| • OpenAI (GPT)      |   |                           |
| • Google (Gemini)    |   | 실제 동작하는 앱 완성!       |
| • Anthropic (Claude) |   +---------------------------+
|                     |
| API 키 발급 + 연결    |
+---------------------+

선수 지식 체크리스트

• [ ] 4~5장: 클로드 코드 명령어, 커스텀 명령어
• [ ] 3장: 클로드 코드 설치 및 기본 사용법
• [ ] 웹 브라우저와 인터넷 기본 개념

핵심 키워드

06-1 클로드 코드에서 API 설정하기

한 줄 요약

API는 프로그램 간 정보를 주고받는 창구이며, API 키를 발급받아 클로드 코드에서 외부 AI 모델을 연동한다.

API란? (레스토랑 비유)

레스토랑에서:
손님(프로그램) → 웨이터(API) → 주방(서버)
손님이 메뉴를 주문하면 웨이터가 주방에 전달하고 음식을 가져옴

프로그래밍에서:
내 앱(프로그램) → API → 외부 서비스(AI 모델, 날씨, 지도 등)
내 앱이 API를 통해 외부 서비스의 기능을 요청하고 결과를 받음

AI 모델 선택 기준

API 키 발급 과정 (Google Gemini 예시)

Step 1: Google AI Studio 접속 (aistudio.google.com)
Step 2: [Get API key] 클릭
Step 3: [Create API key] → 키 생성
Step 4: 생성된 키를 안전하게 보관 (절대 공개하지 않기!)

⚠️ API 키는 비밀번호와 같다!
   GitHub에 올리거나 다른 사람에게 공유하면 안 됨

API 연결 테스트

프롬프트:
"Google Gemini API를 사용해서 간단한 테스트를 해 볼 거야.
 API 키: [발급받은 키]
 '안녕하세요'라고 보내서 응답이 오는지 확인해 줘."

→ 클로드 코드가 API 호출 코드를 작성하고 실행
→ Gemini로부터 응답이 오면 연결 성공!

핵심 체크포인트

• ✅ API = 프로그램 간 소통 창구 (웨이터 역할)
• ✅ API 키 = 인증 비밀번호 (절대 공개 금지)
• ✅ 프로젝트 특성에 맞는 AI 모델을 선택하여 연동

06-2 클로드 코드와 API로 만드는 '냉장고를 부탁해'

한 줄 요약

냉장고 사진을 찍으면 AI가 재료를 인식하고 레시피를 추천하는 실전 앱을 만든다.

앱 구성 — 3단계 실습

1단계: 냉장고 이미지에서 재료 인식하기

프롬프트:
"냉장고 사진을 업로드하면 Gemini API가 이미지를 분석해서
 어떤 재료가 있는지 목록으로 알려주는 기능을 만들어 줘."

동작 흐름:
사용자 → 냉장고 사진 업로드
      → Gemini 멀티모달 API로 이미지 전송
      → AI가 이미지 분석: "당근, 계란, 우유, 파, 두부..."
      → 재료 목록을 화면에 표시

2단계: 레시피 생성하기

프롬프트:
"인식된 재료 목록을 기반으로 만들 수 있는 레시피를
 AI가 추천해 주는 기능을 추가해 줘."

동작 흐름:
인식된 재료: [당근, 계란, 우유, 파]
      → Gemini API에 "이 재료로 만들 수 있는 요리 추천해 줘" 요청
      → AI 응답: "당근 계란볶음", "파전", "우유 스크램블" 등
      → 각 레시피의 조리법과 재료 사용량도 함께 표시

3단계: 사용자 프로필에 레시피 저장하기

프롬프트:
"마음에 드는 레시피를 저장하고 나중에 다시 볼 수 있는
 사용자 프로필 기능을 추가해 줘."

기능:
- 즐겨찾기 레시피 저장 (localStorage)
- 이전에 인식한 재료 기록
- 자주 사용하는 재료 기반 추천

실전 앱 완성 구조

┌────────────────────────────────────────┐
│         🍳 냉장고를 부탁해              │
├────────────────────────────────────────┤
│                                        │
│  [📷 냉장고 사진 업로드]                │
│                                        │
│  인식된 재료:                           │
│  🥕 당근  🥚 계란  🥛 우유  🧅 파      │
│                                        │
│  추천 레시피:                           │
│  1. 당근 계란볶음 (15분)                │
│  2. 파전 (20분)                        │
│  3. 우유 스크램블 (10분)                │
│                                        │
│  [⭐ 저장] [🔄 다른 레시피]              │
└────────────────────────────────────────┘

핵심 체크포인트

• ✅ 멀티모달 API로 이미지 → 텍스트 변환 (재료 인식)
• ✅ AI API로 텍스트 → 레시피 생성 (창의적 추천)
• ✅ localStorage로 사용자 데이터 저장 (프로필)
• ✅ PRD → 단계별 프롬프트 → 실제 동작하는 앱 완성

연습문제 풀이

Q1: API의 역할을 레스토랑 비유로 설명하라.

A: 손님(프로그램)이 웨이터(API)에게 주문(요청)하면, 웨이터가 주방(서버)에 전달하고 음식(응답)을 가져온다. API는 프로그램과 외부 서비스 사이의 소통 창구 역할을 한다.

Q2: API 키를 공개하면 안 되는 이유는?

A: API 키는 비밀번호와 같아서, 다른 사람이 내 키로 API를 사용하면 사용량이 내 계정에 청구된다. GitHub에 올리거나 코드에 하드코딩하면 누구나 사용할 수 있게 되어 예상치 못한 비용이 발생할 수 있다.

Q3: '냉장고를 부탁해' 앱에서 Gemini API를 사용하는 이유는?

A: Gemini가 멀티모달(이미지+텍스트) 처리에 강점이 있기 때문이다. 냉장고 사진(이미지)을 분석하여 재료(텍스트)를 추출하는 작업에 가장 적합하다.

부록 A: 용어 사전

부록 B: 핵심 비교표

부록 C: 추천 참고 자료 & 링크